<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__faster  animate__fadeInRight "
    leave-active-class="animate__animated animate__faster animate__fadeOutRight"
  >
    <div class="right_box" v-if="animate && showMenuRight">
      <div class="content">
        <slot></slot>

        <div class="right-btn" @click="hiden()">
          <img :src="requireImgUrl('sidesImages', '收起')" alt="" />
        </div>
      </div>
    </div>
  </transition>
  <div class="showmenu" v-if="!showMenuRight" @click="handleMenu()">
    <img :src="requireImgUrl('sidesImages', '展开')" alt="" />
  </div>
</template>

<script setup lang="ts">
import { useAnimateStore } from "@/stores/animate";
import { computed, ref, toRefs } from "vue";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { useAppStore } from "@/stores/modules/app";
import { storeToRefs } from "pinia";
const { showMenuRight } = storeToRefs(useAppStore());
const { setshowMenuRight, setHidenRight } = useAppStore();
const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate);
const showmenu = ref<Boolean>(true);
const handleMenu = () => {
  setshowMenuRight();
};
const hiden = () => {
  setHidenRight();
};
</script>

<style scoped lang="scss">
.right_box {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 22.5vw;
  height: 85.5vh;
  top: 14vh;
  right: 0vw;
  border-radius: 10px 0 0 10px;
  z-index: 3999;

  background: linear-gradient(
    270deg,
    rgba(6, 29, 38, 0.8) 0%,
    rgba(11, 56, 77, 0.4) 86%,
    rgba(16, 104, 173, 0) 100%
  );

  .content {
    width: 100%;
    height: 100%;
    // border: 1px solid rgba(255, 255, 255, 0.527);
    box-sizing: border-box;
    position: relative;
    display: flex;
    padding: 10px;
    flex-direction: column;

    box-sizing: border-box;

    .right-btn {
      cursor: pointer;
      position: absolute;
      left: -20px;
      top: 50%;

      transform: translateY(-50%);
    }
  }
}

.showmenu {
  position: absolute;
  top: 58%;
  cursor: pointer;
  right: 0;
  transform: translateY(-50%);
  z-index: 9;

  img {
    // width: clamp(1.5rem, 1.25vw, 3rem);
  }
}
</style>
